<template>
   <div style="text-align:left;">
       <div style="margin-bottom: 10px;text-align: left;font-weight: bold;font-size:17px;line-height: 1.3;display: block;">
         <!-- 

          -->
      <span>{{item.questionTitle}}</span>
    </div>
    
    <div v-if="item.remark.trim()!=''" style="margin-bottom: 20px;text-align: left;font-size:14px;line-height: 1.3;color:grey;display: block;">
      说明：{{item.remark}}
    </div>
    <br>

    <div v-for="(op,index) in option" :key="index">
        <i class="el-icon-medal-1" v-show="index==0"  style="font-size:24px;color:orange;float:left;margin-left:-24px;margin-top:-5px;"></i>
         <span style="display: block;
                      width: 80px;
                      overflow: hidden;
                      text-overflow:ellipsis;
                      white-space: nowrap;
                      position: relative;">{{op.description}}</span>
        <el-progress  :text-inside="true" :stroke-width="15" :percentage="op.count*100/allnum" :color="customColorMethod" style="width:80%;position:relative;left:78px;top:-18px;"></el-progress><span style="text-align:right;display:block;float:right;margin-top:-32px;">{{op.count}}票&nbsp;</span>
    </div>
   </div>
</template>

<script>
export default {
    data(){
        return{
            optional:true,
            option:[
                
            ],
            allnum:0
        }
    },
  props:{
      item:Object,
      autoId:Boolean,
      num:Number,
      
  },
    mounted(){
      this.option=this.item.data
      console.log(this.allnum)
      this.allnum=this.item.total_question_count
      
    },
    methods:{
    
      customColorMethod(percentage) {
        if (percentage < 30) {
          return '#909399';
        } else if (percentage < 70) {
          return '#e6a23c';
        } else {
          return '#67c23a';
        }
      },
    }
    
}

</script>
<style>


</style>